<template>
  <c-loading :loading="false">
    <view class="container">
      <view class="logs">
        <view class="log-item card" v-for="(item, i) in list" :key="i">
          <view>
            <view class="name">{{ item.accountLabelName }}</view>
            <view class="time">{{ item.createTime }}</view>
          </view>
          <view class="text-right">
            <view class="my red" v-if="item.changeAmount >= 0">+{{ item.changeAmount }}</view>
            <view class="my" v-else>{{ item.changeAmount }}</view>
            <view class="mini color-info">
              <view v-if="item.accountStatus != 1">[{{ item.accountStatusName }}]</view>
            </view>
          </view>
        </view>
      </view>

      <c-pager v-bind="pager"></c-pager>
    </view>
  </c-loading>
</template>
<script setup>
import { CLoading, CPager } from '@/components';
import { usePager } from '@/hooks';
import { View } from '@tarojs/components';
import api from '@/api';

const { pager, list, reload } = usePager({
  handler: (skip, take) =>
    api.account.accountList({
      skip,
      take
    })
});
</script>
<style lang="scss">
.logs {
  padding: 20px 0 0;
  .log-item {
    display: flex;
    font-size: 28rpx;
    background-color: var(--color-caption);
    justify-content: space-between;
    align-items: center;
    line-height: 1.8em;
    .name {
      font-weight: bold;
    }
    .mini {
      height: 40rpx;
      font-size: 22px;
    }
  }

  .log-item + .log-item {
    border-top: 1px solid var(--color-gray);
  }

  .log-item .my {
    font-weight: bold;
    font-size: 30rpx;
  }

  .gra {
    color: #999;
    background-color: #f2f2f2;
  }

  .log-item .my.red {
    color: red;
  }

  .gra.log-item .my.red {
    color: #999 !important;
  }

  .log-item .time {
    margin-top: 10rpx;
    font-size: 22rpx;
    color: var(--color-gray);
  }
}
</style>
